<script>
    let {radius, progress, text} = $props();
    radius = Number.parseInt(radius);
    let width = radius * 2 + 40;
    let height = radius + 40;
</script>

<svg width="{width}" height="{height}" viewBox="0 0 {radius * 2 + 20} {radius + 40}">
    <!-- 背景半圆弧 -->
    <path
            d="M 20,{radius + 20} A {radius},{radius} 0 0 1 {radius * 2 + 20},{radius + 20}"
            fill="none"
            stroke="#e6e6e6"
            stroke-width="10"
    />

    <!-- 进度半圆弧 -->
    <path
            d="M 20,{radius + 20} A {radius},{radius} 0 0 1 {radius * 2 + 20},{radius + 20}"
            fill="none"
            stroke="#396cd8"
            stroke-width="10"
            stroke-dasharray="{radius * Math.PI},{radius * Math.PI}"
            stroke-dashoffset="{radius * Math.PI * (1 - progress)}"
            style="transition: stroke-dashoffset 0.3s ease;"
    />
    <!-- 圆心文字 -->
    <text x="{radius + 20}" y="{radius + 20}" text-anchor="middle" dominant-baseline="middle" font-size="20"
          fill="#0f0f0f">
        {text}
    </text>
</svg>